<template>
	<div>
		<div class="btn-list-box">
			<p class="backgroundTitelBox">
				{{ $t('member.bank_card_information') }}
			</p>
			<el-button
				type="primary"
				icon="el-icon-refresh"
				:loading="refreshLoading"
				@click="refresh"
			>
				{{ $t('common.refresh') }}
			</el-button>
		</div>
		<div class="titelBox">{{ $t('member.bank_card') }}</div>
		<el-table
			border
			v-loading="refreshLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			:data="bankCardList"
			:header-cell-style="getRowClass"
			highlight-current-row
		>
			<el-table-column
				align="center"
				prop="updatedAt"
				:label="$t('member.updated_at')"
			>
				<template slot-scope="scope">
					{{ scope.row.updatedAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="bankName"
				align="center"
				:label="$t('member.bank_name')"
			>
				<template slot-scope="scope">
					{{ scope.row.bankName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="cnName"
				align="center"
				:label="$t('member.cn_name')"
			>
				<template slot-scope="scope">
					{{ scope.row.cnName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="cardNumber"
				align="center"
				:label="$t('member.card_number')"
			>
				<template slot-scope="scope">
					{{ scope.row.cardNumber }}
				</template>
			</el-table-column>
			<el-table-column
				prop="bankAddress"
				align="center"
				:label="$t('member.bank_address')"
			>
				<template slot-scope="scope">
					{{ scope.row.bankAddress || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="bindStatus"
				align="center"
				:label="$t('member.bind_status')"
			>
				<template slot-scope="scope">
					{{
						scope.row.bindStatus === 1
							? $t('member.binding_bank')
							: '-'
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="windControlName"
				align="center"
				:label="$t('member.card_noWind_control_level_name')"
			>
				<template slot-scope="scope">
					{{ scope.row.windControlName || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<div class="titelBox">
			{{ $t('member.virtual_currency_account_information') }}
		</div>
		<el-table
			border
			v-loading="refreshLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			:data="VirtualCurrencyList"
			:header-cell-style="getRowClass"
		>
			<el-table-column
				align="center"
				prop="updatedAt"
				:label="$t('member.updated_at')"
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="virtualAddress"
				align="center"
				:label="$t('member.virtual_currency_account_address')"
			>
				<template slot-scope="scope">
					{{ scope.row.virtualAddress || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="virtualKind"
				align="center"
				:label="$t('common.components.virtual_type')"
			>
				<template slot-scope="scope">
					{{ scope.row.virtualKind || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="virtualProtocol"
				align="center"
				:label="$t('member.virtual_protocol')"
			>
				<template slot-scope="scope">
					{{
						typeFilter(
							scope.row.virtualProtocol,
							'virtualProtocolType'
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="bindStatus"
				align="center"
				:label="$t('member.virtual_bind_status')"
			>
				<template slot-scope="scope">
					{{
						scope.row.bindStatus === 1
							? $t('member.binding_bank')
							: '-'
					}}
				</template>
			</el-table-column>
			<el-table-column
				prop="windControlName"
				align="center"
				:label="$t('member.virtural_address_windControl_level_name')"
			>
				<template slot-scope="scope">
					{{ scope.row.windControlName || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<div class="titelBox">
			{{ $t('member.bmh_account_info') }}
		</div>
		<el-table
			border
			v-loading="refreshLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			:data="bmhAccountRespDTOS"
			:header-cell-style="getRowClass"
		>
			<el-table-column
				align="center"
				prop="createdAt"
				:label="'授权时间'"
				:min-width="140"
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="bmhName"
				align="center"
				:label="$t('member.bmh_account')"
				:min-width="130"
			>
				<template slot-scope="scope">
					{{ scope.row.bmhName || '-' }}
				</template>
			</el-table-column>
			<!-- <el-table-column
				prop="accountStatus"
				align="center"
				:label="$t('member.bmh_account_status')"
				:min-width="120"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<span v-if="scope.row.bindStatus === 0" class="disableRgba">
						{{ typeFilter(scope.row.bindStatus, 'bindStatusType') }}
					</span>
					<span
						v-else-if="scope.row.bindStatus === 1"
						class="normalRgba"
					>
						{{ typeFilter(scope.row.bindStatus, 'bindStatusType') }}
					</span>
					<span v-else>-</span>
				</template>
			</el-table-column> -->
			<el-table-column
				prop="windControlName"
				align="center"
				:label="$t('member.bmh_account_windControl_level')"
				:min-width="120"
			>
				<template slot-scope="scope">
					{{ scope.row.windControlName || '-' }}
				</template>
			</el-table-column>
		</el-table>
		<div class="titelBox">
			{{ $t('member.yh_account_info') }}
		</div>
		<el-table
			border
			v-loading="refreshLoading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			:data="yhAccountRespDTOS"
			:header-cell-style="getRowClass"
			class="mb100"
		>
			<el-table-column
				align="center"
				prop="createdAt"
				:label="'授权时间'"
				:min-width="140"
			>
				<template slot-scope="scope">
					{{ scope.row.createdAt || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="yhAccount"
				align="center"
				:label="$t('member.yh_account')"
				:min-width="130"
			>
				<template slot-scope="scope">
					{{ scope.row.yhAccount || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				prop="windControlName"
				align="center"
				:label="$t('member.yh_account_windControl_level')"
				:min-width="120"
			>
				<template slot-scope="scope">
					{{ scope.row.windControlName || '-' }}
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import list from '@/mixins/list'
export default {
	mixins: [list],
	props: {
		parentData: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			refreshLoading: false,
			activeL: true,
			bankCardList: [],
			VirtualCurrencyList: [],
			bmhAccountRespDTOS: [],
			yhAccountRespDTOS: []
		}
	},
	computed: {},

	created() {},
	methods: {
		// 银行卡/虚拟币行号信息
		loadData(val) {
			this.refreshLoading = true
			// Promise.all([
			// 	this.$api
			// 		.getBankCardBank({
			// 			type: 1,
			// 			...this.parentData
			// 		})
			// 		.then((res) => {
			// 			this.bankCardList = res?.data || []
			// 		}),
			// 	this.$api
			// 		.getBankCardBank({
			// 			type: 2,
			// 			...this.parentData
			// 		})
			// 		.then((res) => {
			// 			this.VirtualCurrencyList = res?.data || []
			// 		})
			// ])
			this.$api
				.getBankCardBank({
					...this.parentData
				})
				.then((res) => {
					this.bankCardList = res?.data?.bankCardRespDTOS || []
					this.VirtualCurrencyList =
						res?.data?.virtualAccountRespDTOS || []
					this.bmhAccountRespDTOS =
						res?.data?.bmhAccountRespDTOS || []
					this.yhAccountRespDTOS = res?.data?.yhAccountRespDTOS || []
				})
				.catch(() => {})
				.finally(() => {
					this.refreshLoading = false
				})
		},
		refresh() {
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
.titelBox {
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
	margin: 40px 0 20px;
	display: inline-block;
}

.btn-list-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	.backgroundTitelBox {
		width: 270px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #000;
		color: rgb(255, 255, 255);
		margin: 20px;
		margin-left: 0;
	}
}
</style>
